<!doctype html>
<head>

    <title>RISC-V Emulator</title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>

    <style>

    .terminal {
    border: 0px solid black;
    font-family: courier,fixed,swiss,monospace,sans-serif;
    font-size: 12px;
    color: #bbbbbb;
    background: #000000;
    border-collapse: collapse
    }

    </style>
</head>

<body>
     <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"   >
      <div class="container" >
        <div class="navbar-header">
        <img class="mainlogo" src="images/riscv_logo.png" height="38px" style="margin-top: 5px; padding-top: 5px;"/>
        </div>
      </div>
    </nav>

    <div class="container" style="margin-top: 40px;">
        <div class="col-sm-12">
            <div class="text-center">
                <h1 style="font-family:'Raleway';">RISC-V Simple Demo</h1>
            </div>
            <div class="row" style="margin-top:10px">
                <div class="col-sm-6">
                    <label>
                    Restart with new binary image:
                    <img src="images/upload.png" width="20px" height="20px" title="Restart with new binary image" />
                    <input type="file" id="files" style="visibility:hidden;width:1px; height:1px;" name="files[]" onchange='OnNewImage(this.files)' />
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <span id="stats" class="label label-success"></span>
                </div>
            </div>
            <div class="row" style="margin-top:5px">
                <div class="col-sm-12">
                    <table id="tty" class="terminal">
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jor1k-master-min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>

<script>

var Jor1k = require("Jor1k");
var LinuxTerm = require("LinuxTerm");

var term = new LinuxTerm("tty");
var jor1kgui = new Jor1k(
    {
        term: term,
        path: "../riscv-sys/",
        statsid: "stats",
        relayURL: "wss://relay.widgetry.org/",
        system: {
            kernelURL: "kernel/bbl.bz2",
            dtbURL: "kernel/riscv.dtb",
            arch: "riscv",
            cpu: "wasm",
            memorysize: 64,
        },
        fs: {
            basefsURL: "basefs.json",
            extendedfsURL: "fs.json"
        }
    }
);
jor1kgui.Pause(true);


function OnSelectChange(sel)
{
	if (sel.value[0] == "c")
	{
    		jor1kgui.Pause(true);
    		return;
	}

	jor1kgui.params.system.kernelURL = jor1kgui.params.path + sel.value;
	jor1kgui.Reset();
	jor1kgui.Pause(false);
};

function OnNewImage(files)
{
    var reader = new FileReader();
    reader.onload = function(e) {
        jor1kgui.message.Send("Reset");
        jor1kgui.message.Send("LoadAndStart", reader.result);
	jor1kgui.Pause(false);
    }.bind(this);
    reader.readAsArrayBuffer(files[0]);
}

</script>
